<template>
	<view class="tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack :bottomShadow="true">
			<view slot="back" :isBack="true" class='tn-custom-nav-bar__back'>
				<text v-if="!showHome" class='icon tn-icon-left' @click="goBack"></text>
				<text v-if="showHome" class='icon tn-icon-home-capsule-fill' @click="goHome"></text>
			</view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
				<text class="tn-text-bold tn-text-xl tn-color-black">测试记录</text>
			</view>
		</tn-nav-bar>


		<view class="tn-search-fixed" style="background: linear-gradient(180deg, #D8E5FF, #FFFFFF);">

			<view class="tn-text-center" :style="{paddingTop: vuex_custom_bar_height +'px'}">
				<!-- 发展历程 start-->
				<scroll-view scroll-y="true" :class="showAd == true?'scroll-Y-ad':'scroll-Y-noAd'">
					<view v-if="historyList.length">
						<view class="king-list tn-margin-top-sm" v-for="item in historyList" :key="item.id">
							<view class="king-icon">
								<text
									class='tn-icon-trophy tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
								<text class='tn-text-xl tn-margin-left tn-color-gray'>{{item.create_time}}</text>
							</view>

							<view class='king-item  tn-icon-circle-fill tn-color-red'>
								<view class="article-shadow tn-bg-white" @click="directToHistoryDetail(item)"
									style="width: 560rpx;">
									<view class="tn-flex">
										<view
											class="image-pic tn-margin-left-sm tn-margin-top-sm tn-margin-bottom-sm img-solid"
											:style="{'background-image':'url('+item.subjectDetail.ablum+')'}"
											style="width: 160rpx;height: 160rpx;background-size: cover;">
											<view class="image-article">
											</view>
										</view>
										<view class="tn-margin-sm tn-padding-top-xs" style="width: 100%;">
											<view class="" style="min-height: 105rpx;">
												<text class="tn-text-lg tn-text-bold clamp-text-1 tn-text-justify">
													{{item.subjectDetail.name}}
												</text>
											</view>
											<view class="tn-flex">
												<text class="tn-text-df tn-color-gray clamp-text-2 tn-text-justify">
													我的测试结果

													<block v-if="item.subjectDetail.records_type == 'score'">
														<text class="tn-text-xxl tn-text-bold tn-margin-left-xs "
															style="color: #3465CC;">
															{{item.records_info}}
															<text class="tn-text-df tn-color-gray tn-margin-left-xs "
																style="font-weight: 400 !important; font-size: 28rpx !important;">
																分
															</text>
														</text>
													</block>

													<block v-else>
														<text class="tn-text-xxl tn-text-bold tn-margin-left-xs "
															style="color: #3465CC;">
															{{item.records_info}}
														</text>
													</block>
												</text>

											</view>
										</view>
									</view>
								</view>
							</view>
						</view>


					</view>


					<van-empty v-else description="当前没有数据,快去测测吧" />

				</scroll-view>
			</view>
			<!-- 比例图文 end-->



			<view v-show="showAd == true" id="top-info"
				class="tn-footerfixed tn-flex tn-flex-row-between tn-flex-col-center"
				:style="{transform: `translateY(${topInfoTranslateY}px)`}" @click="showModal">
				<ad adpid="1473457466" style="width: 100%;" :ad-height="100" @load="onload" @close="onclose"
					@error="adOnErrorManager"></ad>
			</view>
		</view>
	</view>


	</view>
</template>

<script>
	import {
		ResultResultHistory
	} from '@/api/history.js'
	import mainAd from '@/components/Ad/mainAd.vue'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateHistory',
		mixins: [template_page_mixin],
		components: {
			mainAd
		},
		data() {
			return {
				topInfo: {
					height: 0,
				},
				topInfoTranslateY: 0,
				prevScrollTop: 0,

				// 是否显示广告
				showAd: true,
				// 返回按钮
				showHome: getCurrentPages().length == 1 ? true : false,

				historyList: [],
			}
		},
		created() {
			this.interfaceResultResultHistory();
		},
		onLoad() {

		},
		onReady() {
			this.getTopInfoRect()
		},
		onPageScroll(e) {
			this.handlePageScroll(e.scrollTop)
		},


		methods: {
			goBack() {
				uni.navigateBack();
			},
			goHome() {
				uni.reLaunch({
					url: '/pages/root/main'
				});
			},


			// 获取顶部销售信息容器相关信息
			getTopInfoRect() {
				this._tGetRect('#top-info').then((res) => {
					if (!res) {
						setTimeout(() => {
							this.getTopInfoRect()
						}, 50)
						return
					}
					this.topInfo.height = res.height
				})
			},
			// 处理页面滚动事件
			handlePageScroll(scrollTop) {
				console.log(scrollTop);
				if (this.prevScrollTop > scrollTop) {

					// 内容下滑，即手指从下往上滚
					this.topInfoTranslateY = 0
				} else {
					// 内容上滑，即手指从上往下滚
					if (scrollTop > this.topInfo.height) {
						this.topInfoTranslateY = this.topInfo.height
					}

				}

				this.prevScrollTop = scrollTop
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			directToHistoryDetail(item) {

				uni.navigateTo({
					url: '/pages/history/historyDetail?id=' + item.records_id
				})
			},

			interfaceResultResultHistory() {
				var that = this;
				ResultResultHistory().then(res => {
					that.historyList = res.list;
				});
			},

			// 广告报错
			adOnErrorManager() {
				this.showAd = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

	}

	/* 页面阴影 start*/
	.img-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.top-fixed {
		position: fixed;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
		top: 0;
		width: 100%;
		transition: all 0.25s ease-out;
		z-index: 100;
	}



	/* 简历内容 */
	.king-list {
		display: block;
		// background-color: #ffffff;
	}

	.king-list .king-icon {
		width: 100%;
		text-align: left;
		padding: 20rpx 0 20rpx 37rpx;
		font-size: 26rpx;
		color: #888;
		display: block;
	}

	.king-list>.king-item {
		padding: 30rpx 30rpx 30rpx 120rpx;
		position: relative;
		display: block;
		z-index: 0;
	}

	.king-list>.king-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1rpx;
		background-color: #E6E6E6;
		left: 60rpx;
		height: 100%;
		top: 0;
		z-index: 8;
	}

	.king-list>.king-item::before {
		display: block;
		position: absolute;
		top: 36rpx;
		z-index: 9;
		// background-color: #ffffff;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		border: none;
		line-height: 50rpx;
		left: 36rpx;
	}


	/* 名片微调 */
	.img-solid {
		border: 1rpx solid #eee;
	}

	.share-img {
		position: fixed;
		/* padding: 10rpx; */
		width: 100rpx;
		height: 100rpx;
		/* top: 680rpx; */
		bottom: 200rpx;
		right: 20rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none;
		border: 6rpx solid rgba(255, 255, 255, 0);
	}

	.resume {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		border-radius: 6rpx;
		color: #666;
		line-height: 1.6;
	}

	.resume+.resume {
		margin-top: 20rpx;
	}

	.resume2 {
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
		text-align: justify;
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/


	.bg-img-cont {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 350rpx;
		margin: 20rpx 0;
		border-radius: 8rpx;
	}



	// .button-no {
	//   border: none;
	//   width: 100%;
	//   height: 100%;
	//   background-color: rgba(0, 0, 0, 0);
	// }


	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 35rpx;
			color: #1D2541;
			background-color: #F3F2F7;
			border-radius: 10rpx;
			font-size: 22rpx;
			padding: 5rpx 15rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/

	.see {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		border-radius: 6rpx;
		color: #666;
		line-height: 1.6;
	}


	/* 悬浮 */
	.rocket-sussuspension {
		animation: tiger 3s ease-in-out infinite;
	}

	@keyframes tiger {

		0%,
		100% {
			transform: translate(0, 0);
		}

		50% {
			transform: translate(-0.8rem, 1rem);
		}
	}

	.login {
		position: relative;
		height: 100%;
		z-index: 1;

		/* 背景图片 start */
		&__bg {
			z-index: -1;
			position: fixed;

			&--top {
				top: 0;
				left: 0;
				right: 0;
				width: 100%;

				.bg {
					width: 750rpx;
					will-change: transform;
				}

				.rocket {
					margin: 50rpx 30%;
					width: 300rpx;
					will-change: transform;
				}
			}

			&--bottom {
				bottom: -10rpx;
				left: 0;
				right: 0;
				width: 100%;
				// height: 144px;
				// margin-bottom: env(safe-area-inset-bottom);

				image {
					width: 750rpx;
					will-change: transform;
				}
			}
		}
	}

	/* 背景图片 end */

	.article-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 资讯主图 start*/
	.image-article {
		border-radius: 8rpx;
		border: 1rpx solid #F8F7F8;
		width: 160rpx;
		height: 160rpx;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	// .article-shadow {
	//   border-radius: 15rpx;
	//   box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	// }

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 标签内容 start*/
	.tn-tag-content {
		padding-right: 10rpx;
		display: inline-block;
		line-height: 35rpx;
		padding: 5rpx 25rpx;
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		max-height: 160rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
		bottom: 0;
		width: 100%;
		transition: all 0.25s ease-out;
		will-change: transform;
		z-index: 100;
	}

	.scroll-Y-ad {
		height: calc(100vh - env(safe-area-inset-bottom) - 160rpx - 64px - 20px - 50rpx);
	}

	.scroll-Y-noAd {
		height: calc(100vh - env(safe-area-inset-bottom) - 64px);
	}
	.tn-search-fixed{
	  position: fixed;
	  top: 0rpx;
	  width: 100%;
	  transition: all 0.25s ease-out;
	  z-index: 1;
	}
	
</style>